import React from 'react';
import { Card, Descriptions } from 'antd';
import SearchTable from '@/components/common/SearchTable';
import { getDicByKey } from '@/support/common';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import moment from 'moment';

@connect((state: any) => ({
  vehicleInfoQuery: state.vehicleInfoQuery,
  loading: state.loading.effects['vehicleInfoQuery/getDataWithRes'],
}))
export default class IpdaTab extends React.Component<any, any> {
  // onSource = () =>
  //   new Promise(resolve => {
  //     resolve({
  //       data: [...new Array(10)].map(() => ({})),
  //       total: 21,
  //     });
  //   });
  constructor(props) {
    super(props);
    this.state = {
      data: {
        deviceId: '',
        deviceName: '',
        deviceStatus: '',
        versionHardware: '',
        enrollDate: '',
        versionSoftware: '',
        produceDate: '',
        publishDate: '',
        createDate: '',
        bluetoothMac: '',
        atbSn: '',
      },
    };
  }
  onSource = (page, size, args) =>
    new Promise(async resolve => {
      const { vehicleInfoQuery } = this.props;
      const res = await this.props.dispatch({
        type: 'vehicleInfoQuery/getFetchPage',
        payload: {
          url: '/ipda/findreplacehistory',
          vin: vehicleInfoQuery.vin,

          current: page,
          pageSize: size,
          deviceType: 4,
          ...args,
        },
      });
      if (res && res.statusCode === '0') {
        resolve({
          total: res.data.pagination.total,
          data: res.data.list,
        });
      } else {
        resolve({
          total: 0,
          data: [],
        });
      }
    });

  static contextTypes = {
    dicData: PropTypes.any,
  };
  componentDidMount() {
    this.getDetail();
  }
  getDetail() {
    const { vehicleInfoQuery } = this.props;
    const { dispatch } = this.props;

    vehicleInfoQuery.pdsn
      ? dispatch({
          type: 'vehicleInfoQuery/getDataWithRes',
          payload: {
            url: '/ipda/findipdadetail',
            deviceId: vehicleInfoQuery.pdsn,
          },
          callback: response => {
            if (response && response.statusCode == '0' && response.data) {
              this.setState({
                data: Object.assign(this.state.data, response.data),
              });
            }
          },
        })
      : '';
  }
  render() {
    const { context } = this;
    const { data } = this.state;
    const {
      vehicleInfoQuery: {
        pageData: { pagination },
      },
    } = this.props;

    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        render: (text: any, record: any, index: any) => {
          return index + 1 + (pagination.current - 1) * pagination.pageSize;
        },
      },
      {
        title: '换件时间',
        dataIndex: 'createDate',
        render: (text: any, record: any, index: any) => {
          return text && moment(text).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '原车机编号',
        dataIndex: 'oldDeviceId',
      },
      {
        title: '原一体机编号',
        dataIndex: 'oldAtbSn',
      },
      {
        title: '新车机编号',
        dataIndex: 'newDeviceId',
      },
      {
        title: '新一体机编号',
        dataIndex: 'newAtbSn',
      },
    ];
    const { loading } = this.props;
    return (
      <>
        <Card bordered={false} loading={loading}>
          <Descriptions bordered size="small" style={{ overflow: 'hidden' }}>
            <Descriptions.Item label="车机编号"> {data.deviceId}</Descriptions.Item>
            <Descriptions.Item label="设备名称"> {data.deviceName}</Descriptions.Item>
            <Descriptions.Item label="设备状态">
              {data.deviceStatus
                ? getDicByKey(context.dicData, 'deviceStatus', `${data.deviceStatus}`)
                : ''}
            </Descriptions.Item>
            <Descriptions.Item label="硬件版本号">{data.versionHardware}</Descriptions.Item>

            <Descriptions.Item label="软件版本号">{data.versionSoftware}</Descriptions.Item>
            <Descriptions.Item label="激活时间">{data.enrollDate}</Descriptions.Item>
            <Descriptions.Item label="生产日期">{data.produceDate}</Descriptions.Item>
            <Descriptions.Item label="发布日期">{data.publishDate}</Descriptions.Item>
            <Descriptions.Item label="入库时间"> {data.createDate}</Descriptions.Item>
            <Descriptions.Item label="蓝牙MAC地址">{data.bluetoothMac}</Descriptions.Item>
            <Descriptions.Item label="一体机编号">{data.atbSn}</Descriptions.Item>
            <Descriptions.Item label=""></Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title="换件历史记录" bordered={false}>
          <SearchTable
            tableProps={{
              rowKey: 'sid',
              scroll: { x: true },
              columns: columns,
              onSource: this.onSource,
            }}
          />
        </Card>
      </>
    );
  }
}
